@extends('layouts.admin')

@section('title', '仪表盘')

@section('content')
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f8f8f8;
            color: #333;
            line-height: 1.6;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background-color: #ffffff;
            padding: 20px 0;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }

        .sidebar h1 {
            color: rgb(255, 187, 1);
            padding: 0 20px 20px;
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .sidebar ul {
            list-style: none;
        }

        .sidebar li {
            padding: 12px 20px;
            color: #000000;
        }

        .sidebar li a {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .sidebar li:hover {
            background-color: #f5f5f5;
        }

        .sidebar li.active {
            background-color: rgb(255, 238, 193);
            color: #000000;
            border-left: 4px solid rgb(255, 187, 1);
        }

        .main-content {
            flex: 1;
            padding: 25px;
            background-color: #f8f8f8;
        }

        .route-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 25px;
            overflow: hidden;
            border: 1px solid #e0e0e0;
        }

        .route-header {
            background-color: rgb(255, 187, 1);
            color: white;
            padding: 12px 25px;
            font-weight: bold;
            font-size: 16px;
        }

        .campus-header {
            font-weight: bold;
            font-size: 15px;
            padding: 12px 25px;
            border-bottom: 1px solid #f0f0f0;
            background-color: #fafafa;
        }

        .campus-content {
            padding: 12px 25px;
            border-bottom: 1px solid #f0f0f0;
        }

        .campus-section:last-child .campus-content {
            border-bottom: none;
        }

        .truckers-label {
            font-weight: 500;
            margin-bottom: 8px;
        }

        .trucker-item {
            margin-left: 20px;
            padding: 4px 0;
            font-family: monospace;
        }

        .no-trucker {
            color: #999;
            font-style: italic;
            margin-left: 20px;
        }

        .time-arrival {
            margin-top: 12px;
            font-weight: 500;
        }

        .time-value {
            margin-left: 20px;
            font-family: monospace;
            color: #ff6600;
            font-weight: bold;
            margin-top: 4px;
        }

        .package-item, .info-item {
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
        }

        .package-config {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .config-option {
            display: inline-block;
            margin-right: 20px;
        }

        .open-button {
            background-color: rgb(255, 187, 1);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        .package-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .package-table th {
            background-color: rgb(255, 187, 1);
            color: white;
            padding: 12px;
            text-align: left;
        }

        .package-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #eee;
        }

        .package-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .package-table tr:hover {
            background-color: #f1f1f1;
        }

        .status-running {
            color: #28a745;
            font-weight: bold;
        }

        .divider {
            border-top: 2px solid #ddd;
            margin: 20px 0;
        }

        .input-list-header {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            padding: 10px 0;
        }

        .pagination a {
            color: #333;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid #ddd;
            margin: 0 4px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .pagination a.active {
            background-color: rgb(255, 187, 1);
            color: white;
            border: 1px solid rgb(255, 187, 1);
        }

        .pagination a:hover:not(.active) {
            background-color: #ddd;
        }

        .pagination a.disabled {
            color: #aaa;
            pointer-events: none;
            cursor: default;
        }

        .package-table {
            margin-bottom: 0;
        }
        .sidebar li.Start {
            background-color: rgb(255 255 255);
            color: #000000;
            border-left: 4px solid rgb(255 255 255);
            font-weight: 700;
        }

        .campus-content {
            padding: 12px 25px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            flex-direction: column;
            gap: 10px; /* 增加间距 */
        }

        .campus-content ul {
            margin: 0;
            padding: 0;
        }

        .campus-content li {
            list-style: none;
            margin-bottom: 8px;
        }

        .package-info {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .class-code {
            font-family: monospace;
            margin-left: 20px;
        }
        .class-code {
            font-family: 'Courier New', monospace;
            margin: 4px 0 4px 20px;
            color: #333;
        }
        .campus-content {
            padding: 15px 25px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .package-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .package-id {
            font-weight: bold;
            color: #333;
        }

        .campus-route {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #555;
        }

        .class-codes {
            margin-top: 8px;
            margin-left: 20px;
        }

        .class-code {
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #444;
            margin: 4px 0;
            letter-spacing: 0.5px;
        }

        .no-package {
            padding: 15px 25px;
            color: #666;
            font-style: italic;
            background-color: #fafafa;
        }
    </style>


    <div class="sidebar">
        <h1>Campus Fxpress</h1>
        <ul>
            <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li><a href="{{ route('admin.Package_List') }}">Package List</a></li>
            <li class="active"><a href="{{ route('admin.Campus_List') }}">Campus List</a></li>
            <li class="Start"><a href="#">Start Management</a></li>
            <li><a href="{{ route('admin.Courier_List') }}">Contact List</a></li>
            <li><a href="{{ route('admin.Trucker_List') }}">Trucker List</a></li>
        </ul>
    </div>

    <div class="main-content">
        <div class="route-section">
            <div class="route-header">Campus List</div>

            @foreach(['A' => 1, 'B' => 2, 'C' => 3, 'D' => 4, 'E' => 5] as $campusName => $campusId)
                <div class="campus-section">
                    <div class="campus-header">Campus {{ $campusName }}</div>

                    @php
                        $campusPackages = $packages->where('campus_id', $campusId);
                    @endphp

                    @if($campusPackages->count() > 0)
                        @foreach($campusPackages as $package)
                            <div class="campus-content">
                                <div class="package-info">
                                    <p class="package-id">ID: {{ $package->id }}</p>
                                    <div class="campus-route">
                                        <span>{{ $package->from_campus->name }}</span>
                                        <span>→</span>
                                        <span>{{ $package->to_campus->name }}</span>
                                    </div>
                                    <div class="class-codes">
                                        <p class="class-code">CLASS/0000000000000</p>
                                        <p class="class-code">CLASS/0000000000000</p>
                                        <p class="class-code">CLASS/0000000000000</p>
                                        <p class="class-code">CLASS/0000000000000</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="no-package">
                            No container in this campus now.
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
@endsection
